<template>
  <el-container>
    <el-header style="height: 150px">
      <el-row class="head-content">
        <!-- 课程名 -->
        <el-row style="line-height: 25px; height: 25px; font-size: 18px">
          {{ this.courseInfo.course_name }}
        </el-row>
        <!-- 开课时间及学院 -->
        <el-row
          style="
            max-width: 650px;
            line-height: 14px;
            margin-top: 10px;
            font-size: 13px;
            color: #909399;
          "
        >
          {{ this.courseInfo.college }}
          {{ this.courseInfo.year }}年{{ this.courseInfo.semester }}学期
        </el-row>
        <!-- 教师头像 -->
        <el-row style="margin-top: 5px; font-size: 14px; color: #606266">
          授课教师:
          {{ this.courseInfo.teacher_name }}
        </el-row>
      </el-row>
      <el-divider style="margin: 15px" />
    </el-header>
    <el-main class="body-content">
      <!-- 课程tab栏 -->
      <el-tabs tab-position="left">
        <!-- 课程信息页面 -->
        <el-tab-pane style="background-color: #f9fafc" label="课程信息">
          <el-row style="height: 10px" />
          <el-card class="info-card" shadow="never" header="课程信息">
            <el-row class="info-detail">
              <el-col :span="8">
                课程名称
                <span class="info-main">{{ this.courseInfo.course_name }}</span>
              </el-col>
              <el-col :span="8">
                课程代码
                <span class="info-main">{{ this.courseInfo.courseId }}</span>
              </el-col>
              <el-col :span="8">
                开课院系
                <span class="info-main">{{ this.courseInfo.college }}</span>
              </el-col>
            </el-row>
            <el-row class="info-detail">
              <el-col :span="8">
                学年期
                <span class="info-main"
                  >{{ this.courseInfo.year }}年{{
                    this.courseInfo.semester
                  }}</span
                >
              </el-col>
              <el-col :span="8">
                上课时段
                <span class="info-main">{{ this.courseInfo.schedule }}</span>
              </el-col>
              <el-col :span="8">
                课程学分
                <span class="info-main">{{ this.courseInfo.credits }}</span>
              </el-col>
            </el-row>
            <el-row class="info-detail">
              <el-col :span="8">
                授课教师
                <span class="info-main">
                  {{ this.courseInfo.teacher_name }}
                </span>
              </el-col>
              <el-col :span="8">
                联系方式
                <span class="info-main">
                  {{ this.courseInfo.teacher_email }}
                </span>
              </el-col>
            </el-row>
          </el-card>
          <el-card class="info-card" shadow="never" header="课程简介">
            <span style="font-size: 14px; line-height: 2">
              {{ this.courseInfo.introduction }}
            </span>
          </el-card>
          <!-- <el-card class="info-card" shadow="never" header="课程公告">
            <span style="color: #909399">尚无课程公告</span>
          </el-card> -->
        </el-tab-pane>
        <!-- <el-tab-pane label="章节" style="background-color: #f9fafc">章节</el-tab-pane> -->
        <!-- 课件资料页面 -->
        <el-tab-pane label="课件" style="background-color: #f9fafc">
          <!-- 课件表格 -->
          <el-table
            :data="resourseTable"
            style="margin-left: 30px; margin-top: 20px; width: 95%"
          >
            <!-- 课件内容下拉框 -->
            <el-table-column type="expand" fixed="left">
              <template slot-scope="props">
                <el-form label-position="left">
                  <el-form-item
                    label="文件："
                    v-if="props.row.fileName !== null"
                  >
                    <span>
                      <el-button
                        type="success"
                        @click="dlFile(props.$index, props.row)"
                      >
                        {{ props.row.fileName }}
                      </el-button>
                    </span>
                  </el-form-item>
                  <el-form-item label="课件信息：">
                    <span>{{ props.row.coursewareDescription }}</span>
                  </el-form-item>
                </el-form>
              </template>
            </el-table-column>
            <el-table-column
              prop="coursewareName"
              sortable
              label="课件名称"
              width="150"
            >
              <template slot-scope="scope">
                <el-tooltip
                  effect="dark"
                  content="展开行以查看详情"
                  placement="top-start"
                >
                  <b>
                    {{ scope.row.coursewareName }}
                  </b>
                </el-tooltip>
              </template>
            </el-table-column>
            <el-table-column label="有效日期">
              <template slot-scope="scope">
                <div style="margin: 5px">
                  <el-tag size="mini" type="success">起</el-tag>
                  {{ $global.formatTimeString(scope.row.startTime) }}
                </div>
                <div style="margin: 5px">
                  <el-tag size="mini" type="danger">止</el-tag>
                  {{ $global.formatTimeString(scope.row.endTime) }}
                </div>
              </template>
            </el-table-column>
            <el-table-column label="课件权限">
              <template slot-scope="scope">
                {{
                  $global.mapDownloadPermission(scope.row.downloadPermission)
                }}
              </template>
            </el-table-column>
            <el-table-column label="操作" align="center">
              <template slot-scope="scope">
                <el-button size="mini" @click="dlFile(scope.$index, scope.row)"
                  >下载</el-button
                >
              </template>
            </el-table-column>
          </el-table>
          <!-- 分页操控 -->
          <el-pagination
            @current-change="handleCurrentChange"
            :current-page.sync="currentPage_src"
            :page-size="20"
            layout="prev, pager, next"
            :total.sync="total_src"
            style="margin-left: 30px"
          >
          </el-pagination>
        </el-tab-pane>
        <!-- 作业列表页面 -->
        <el-tab-pane label="作业" style="background-color: #f9fafc">
          <!-- 作业表格 -->
          <el-table
            :data="homeworkTable"
            style="margin-left: 30px; margin-top: 20px; width: 95%"
          >
            <!-- 展开详情 -->
            <el-table-column type="expand" fixed="left">
              <template slot-scope="props">
                <el-form label-position="left">
                  <el-form-item label="作业描述：">
                    <span>{{ props.row.assignmentDescription }}</span>
                  </el-form-item>
                </el-form>
              </template>
            </el-table-column>
            <!-- 作业名 -->
            <el-table-column
              label="作业名"
              width="180"
              sortable
              prop="assignmentName"
            >
              <template slot-scope="scope">
                <b>{{ scope.row.assignmentName }}</b>
              </template>
            </el-table-column>
            <!-- 作业期限 -->
            <el-table-column label="作业期限" width="250">
              <template slot-scope="scope">
                <el-row>
                  <el-tag size="mini" type="success">起</el-tag>
                  {{ $global.formatTimeString(scope.row.startTime) }}
                </el-row>
                <el-row>
                  <el-tag size="mini" type="danger">止</el-tag>
                  {{ $global.formatTimeString(scope.row.endTime) }}
                </el-row>
              </template>
            </el-table-column>
            <el-table-column label="操作" align="center">
              <template slot-scope="scope">
                <el-button
                  size="mini"
                  @click="handleUpHW(scope.$index, scope.row)"
                  >作业详情</el-button
                >
              </template>
            </el-table-column>
          </el-table>
          <!-- 分页操控 -->
          <el-pagination
            @current-change="handleCurrentChange"
            :current-page.sync="currentPage_hw"
            :page-size="20"
            layout="prev, pager, next"
            :total.sync="total_hw"
            style="margin-left: 30px"
          >
          </el-pagination>
        </el-tab-pane>
        <!-- 班级成员页面 -->
        <el-tab-pane label="班级成员" style="background-color: #f9fafc">
          <!-- 成员列表 -->
          <el-table
            :data="memberTable"
            style="margin-left: 30px; margin-top: 20px; width: 95%"
          >
            <el-table-column label="班级成员" width="180">
              <template slot-scope="scope">
                <el-row>
                  <!-- 姓名及学工号 -->
                  <el-col :span="14">
                    <el-row
                      ><span>{{ scope.row.studentName }}</span></el-row
                    >
                    <el-row
                      ><span>{{ scope.row.studentId }}</span></el-row
                    >
                  </el-col>
                </el-row>
              </template>
            </el-table-column>
            <el-table-column label="院系" width="250" prop="college">
            </el-table-column>
            <el-table-column label="专业" width="100" prop="major">
            </el-table-column>
            <el-table-column label="E-mail" prop="email"> </el-table-column>
          </el-table>
          <!-- 分页操控 -->
          <el-pagination
            @current-change="handleCurrentChange"
            :current-page.sync="currentPage_hw"
            :page-size="20"
            layout="prev, pager, next"
            :total.sync="total_hw"
            style="margin-left: 30px"
          >
          </el-pagination>
        </el-tab-pane>
        <el-tab-pane label="课程公告" style="background-color: #f9fafc">
          <!-- 公告列表 -->
          <el-table
            :data="annouceList"
            style="margin-left: 30px; margin-top: 20px; width: 95%"
          >
            <el-table-column label="公告" width="150" prop="announcementTitle">
            </el-table-column>
            <el-table-column label="时间" width="220" prop="time">
            </el-table-column>
            <el-table-column label="内容" prop="announcementContent">
              <template slot-scope="scope">
                <el-row>
                  <el-card shadow="never">
                    {{ scope.row.announcementContent }}
                  </el-card>
                </el-row>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
      </el-tabs>
    </el-main>
    <!-- <el-button @click="test()">测试</el-button> -->
  </el-container>
</template>

<script>
import qs from "qs";
import axios from "axios";
import stuInfo from "../../store/student";
import global from "../../lib/global";

export default {
  mounted() {
    // 按课程号查询课件
    axios
      .post(
        "/api/showAllCoursewares",
        qs.stringify({ courseId: this.courseInfo.courseId })
      )
      .then((res) => {
        // console.log(res, "课件列表");
        this.resourseTable = res.data.coursewareList.filter(function (element) {
          return element.downloadPermission != 2;
        });
        this.total_src = this.resourseTable.length;
      });
    // 按课程号查询作业
    axios
      .post(
        "/api/showAllAssignmentTopics",
        qs.stringify({ courseId: this.courseInfo.courseId })
      )
      .then((res) => {
        // console.log(res);
        this.homeworkTable = res.data.assignmentTopicList;
        this.total_hw = this.homeworkTable.length;
      });
    // 按课程号查询班级成员
    axios
      .post(
        "/api/getStudentsByClassId",
        qs.stringify({ courseId: this.courseInfo.courseId })
      )
      .then((res) => {
        // console.log("班级成员", res);
        this.memberTable = res.data.studentsList;
      })
      .catch((err) => {
        console.log("班级成员", err);
      });

    axios
      .post(
        "/api/showAllAnnouncements",
        qs.stringify({ courseId: this.courseInfo.courseId })
      )
      .then((res) => {
        if (res.data.announcementList != null) {
          res.data.announcementList.forEach((ann) => {
            ann.time = global.formatTimeString(ann.lastChangeTime);
            this.annouceList.push(ann);
          });
        }
      });

    // console.log(this.courseInfo, "courseInfo");
  },
  computed: {
    hwDetail() {
      return stuInfo.getters.getHwDetail;
    },
    courseInfo() {
      return stuInfo.getters.getChoosenCourse;
    },
  },
  data() {
    return {
      resourseTable: [], // 课件列表
      currentPage_src: 1, // 当前页数
      total_src: 0, // 总课件数
      homeworkTable: [], // 作业列表
      currentPage_hw: 1,
      total_hw: 0,
      memberTable: [],
      currentPage_member: 1,
      total_member: 4,
      annouceList: [],
    };
  },
  methods: {
    handleCurrentChange(val) {
      console.log(val);
    },
    handleUpHW(index, row) {
      // console.log(index, row);
      stuInfo.commit("setHwDetail", row);
      // console.log(this.hwDetail);
      this.$router.push("/CourseDetail/HWDetail");
    },
    dlFile(index, row) {
      this.$message.info("文件正在下载，请稍候");
      this.$global.downloadCoursewareFile(
        row.courseId,
        row.coursewareId,
        row.fileName
      );
    },
    test() {
      axios
        .post(
          "/api/showAllAnnouncements",
          qs.stringify({ courseId: this.courseInfo.courseId })
        )
        .then((res) => {
          if (res.data.announcementList != null) {
            res.data.announcementList.forEach((ann) => {
              ann.time = global.formatTimeString(ann.lastChangeTime);
              this.annouceList.push(ann);
            });
          }
        });
    },
  },
};
</script>

<style>
.head-content {
  margin: 0 auto;
  padding: 14px 10px;
  line-height: 14px;
  min-height: 75px;
}
.body-content {
  margin: 0 20px;
  padding: 14px 10px;
}
.info-card {
  margin: 25px;
}
.info-detail {
  line-height: 2;
  font-size: 14px;
  color: #606266;
}
.info-main {
  padding-left: 30px;
  color: #303133;
  font-size: 16px;
}
</style>
